<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="50%"
      :value="value"
      @close="handleClose">
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span class="blonk">【题型】:</span> 
            <span v-if="value.questionType === '3'">{{ "简答" }}</span>
            <span v-if="value.questionType === '2'">{{ "多选" }}</span>
            <span v-if="value.questionType === '1'">{{ "单选" }}</span>
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【编号】: {{value.id}}</div></el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span class="blonk">【难度】: </span> 
            <span v-if="value.difficulty === '3'">{{ "困难" }}</span>
            <span v-if="value.difficulty === '2'">{{ "一般" }}</span>
            <span v-if="value.difficulty === '1'">{{ "简单" }}</span>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【标签】: {{value.tags}}</div></el-col>
      </el-row>
       <el-row>
        <el-col :span="6"><div class="grid-content bg-purple">【学科】: {{value.subject}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【目录】: {{value.catalog}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div>【方向】: {{value.direction}}</el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple content">【题干】:
             </div>
        </el-col>
        <el-col :span="24">
          <div style="color:blue">
              <span v-html="value.question"></span>
            </div>
        </el-col>
        <el-col :span="24"  v-if="value.questionType !== '3'">
          <div>
            <span v-if="value.questionType === '3'">{{ "简答" }}题</span>
            <span v-if="value.questionType === '2'">{{ "多选" }}题</span>
            <span v-if="value.questionType === '1'">{{ "单选" }}题</span>
             选项:(以下选中的选项为正确答案)</div>
        </el-col>
        <el-col :span="24">
          <div>
            <el-form v-if="value.questionType !== '3'">
              <el-form-item>
                <!-- 单选题的单选框 -->
                <el-radio-group v-model="answer" class="danxuan" size="medium" @change="clickAnswer" v-if="value.questionType !== '2'">
                  <div v-for="item in options">
                    <el-radio :label="item.isRight">{{item.title}}</el-radio>
                  </div>
                </el-radio-group>
                <!-- 多选题的多选框 -->
                <el-checkbox-group v-model="answerss" v-if="value.questionType !== '1'" @change="clickAnswer">
                   <div v-for="item in options">
                       <el-checkbox :label="item.isRight">{{item.title}}</el-checkbox>
                  </div>
                </el-checkbox-group>
              </el-form-item>
             </el-form>
          </div>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :div="12">
          <div class="grid-content bg-purple">
            <span class="blonk">【参考答案】: </span>
            <el-button type="danger" @click="playVideo">视频答案预览</el-button>
          </div>
         </el-col>
         <el-col :div="12">
            <div class="video"  v-if="play">
              <video :src="value.videoURL"controls="controls" autoplay="autoplay">不支持</video>
            </div>
         </el-col>
      </el-row>
      <hr>
       <el-row>
        <el-col :span="12">
          <span class="grid-content bg-purple" controls autoplay>
            <span class="blonk">【参考答案】: </span><span v-html="value.answer"></span>
          </span>
         </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">【题目备注】: {{value.remarks}}
          </div>
         </el-col>
      </el-row>

      <div  style="text-align: right;">
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary">关闭</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/questions.js";
export default {
  name: 'QuestionsPreview',
  props: {
    value: Object,
    swit: Boolean
  },
  data () {
    return {
      //  控制弹窗谈起
      dialogVisible: false,
      //  控制答案视频是否播放
      play: false,
      // 获取题目详情的数据
      details: {
        id: 23,
        isNext: false
      },
      // 当前打开的题目答案
      options: [],
      answer: 1,
      answerss: [1]
    }
  },
  watch:{
      // 监听 addOrUpdateVisible 改变
      async swit(oldVal,newVal){
          this.dialogVisible = this.swit;
          this.details.id = this.value.id
          const { data }= await detail(this.details)
          this.options = data.options
      },
  },
  methods:{
    clickAnswer () {
      this.answer = 1
      this.answerss = [1]
    },
    // 点击播放视频
    playVideo () {
      this.play = true
    },
    // 弹出框关闭后触发
    handleClose(){
        this.play = false
        // 子组件调用父组件方法，并传递参数
        this.$emit('changeShow','false')
    }
  },
}
</script>

<style>
.el-row{
  font-size: 18px;
  margin-bottom: 20px;
}
.content div {
  margin: 20px 0;
}
.bg-purple{
  display: flex;
  align-items: center;
  width: 800px
}
.video{
 width: 400px;
 height: 300px
}
video{
  width: 400px;
  height: 300px
}
.blonk{
   margin:0;
   padding-right: 5px;
}
.el-form .el-form-item--medium{
  margin-left: 0;
}
.danxuan div{
  margin-top:10px;
  font-size: 18px;
}

</style>
